import {userLoginByEmailUsingPost, userLoginUsingPost} from '@/services/openAPI-backend/userController';
import {
  AlipayCircleOutlined,
  LockOutlined, MailOutlined,
  TaobaoCircleOutlined,
  UserOutlined,
  WeiboCircleOutlined,
} from '@ant-design/icons';
import {
  LoginFormPage,
  ProFormCaptcha,
  ProFormCheckbox,
  ProFormText,
} from '@ant-design/pro-components';
import { Helmet, SelectLang, history, useIntl, useModel } from '@umijs/max';
import { Alert, Button, Tabs, message, theme } from 'antd';
import {createStyles, keyframes} from 'antd-style';
import React, { CSSProperties, useState } from 'react';
import Settings from '../../../../config/defaultSettings';
import {sendSimpleMessageUsingPost1} from "@/services/openAPI-backend/sendMailLoginController";

const useStyles = createStyles(({ token }) => {
  return {
    action: {
      marginLeft: '8px',
      color: 'white',
      fontSize: '24px',
      verticalAlign: 'middle',
      cursor: 'pointer',
      transition: 'color 0.3s',
      '&:hover': {
        color: token.colorPrimaryActive,
      },
    },
    lang: {
      color: 'white',
      width: 42,
      height: 42,
      lineHeight: '42px',
      position: 'fixed',
      right: 16,
      borderRadius: token.borderRadius,
      ':hover': {
        backgroundColor: token.colorBgTextHover,
      },
    },
    container: {
      color: 'white',
      display: 'flex',
      flexDirection: 'column',
      height: '100vh',
      overflow: 'auto',
      backgroundImage:
        "url('https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr')",
      backgroundSize: '100% 100%',
    },
  };
});
type LoginType = 'phone' | 'account';

const iconStyles: CSSProperties = {
  color: 'white',
  fontSize: '18px',
  verticalAlign: 'middle',
  cursor: 'pointer',
};
const ActionIcons = () => {
  const { styles } = useStyles();

  return (
    <>
      <AlipayCircleOutlined key="AlipayCircleOutlined" className={styles.action} />
      <TaobaoCircleOutlined key="TaobaoCircleOutlined" className={styles.action} />
      <WeiboCircleOutlined key="WeiboCircleOutlined" className={styles.action} />
    </>
  );
};

const Lang = () => {
  const { styles } = useStyles();

  return (
    <div className={styles.lang} data-lang>
      {SelectLang && <SelectLang />}
    </div>
  );
};

const LoginMessage: React.FC<{
  content: string;
}> = ({ content }) => {
  return (
    <Alert
      style={{
        marginBottom: 24,
      }}
      message={content}
      type="error"
      showIcon
    />
  );
};

const Login: React.FC = () => {
  const [userLoginState] = useState<API.LoginResult>({});
  // const [type, setType] = useState<string>('account');
  const { setInitialState } = useModel('@@initialState');
  const { styles } = useStyles();
  const intl = useIntl();
  const handleSubmitmaile = async (values: API.UserLoginByEmailRequest) => {
    try {
      // 登录
      const res = await userLoginByEmailUsingPost({ ...values });
      if (res.data) {
        localStorage.setItem('loginUser', res.data.userAccount);
        history.push('/welcome');
        setInitialState({
          loginUser: res.data,
        });
        sessionStorage.setItem('loginUser', JSON.stringify(res.data));

        history.push('/welcome');
        return;
      }
    } catch (error) {
      const defaultLoginFailureMessage = intl.formatMessage({
        id: 'pages.login.failure',
        defaultMessage: '登录失败，请重试！',
      });
      console.log(error);
      message.error(defaultLoginFailureMessage);
    }
  };
  const handleSubmit = async (values: API.UserLoginRequest) => {
    try {
      // 登录
      const res = await userLoginUsingPost({ ...values });
      if (res.data) {
        localStorage.setItem('loginUser', res.data.userAccount);
        history.push('/welcome');
        setInitialState({
          loginUser: res.data,
        });
        sessionStorage.setItem('loginUser', JSON.stringify(res.data));
        history.push('/welcome');
        return;
      }
    } catch (error) {
      const defaultLoginFailureMessage = intl.formatMessage({
        id: 'pages.login.failure',
        defaultMessage: '登录失败，请重试！',
      });
      console.log(error);
      message.error(defaultLoginFailureMessage);
    }
  };
  const [loginType, setLoginType] = useState<LoginType>('account');
  const { status, type } = userLoginState;
  const { token } = theme.useToken();
  const fadeAndScaleIn = keyframes`
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
      `;
  const fade = keyframes`
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
      `;
  return (
    <div className={styles.container}>
      <Helmet>
        <title>
          {intl.formatMessage({
            id: 'menu.login',
            defaultMessage: '登录页',
          })}
          - {Settings.title}
        </title>
      </Helmet>
      <Lang />
      <div
        style={{
          flex: '1',
          padding: '32px 0',
        }}
      >
        <LoginFormPage
          backgroundImageUrl="https://mdn.alipayobjects.com/huamei_gcee1x/afts/img/A*y0ZTS6WLwvgAAAAAAAAAAAAADml6AQ/fmt.webp"
          logo="https://ts3.cn.mm.bing.net/th?id=OIP-C.msJ5-X_TC957GXCRltCiPAHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2"
          backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
          title="E-API"
          containerStyle={{
            backgroundColor: 'white',
            backdropFilter: 'blur(4px)',
            animation: `${fadeAndScaleIn} 1s ease-in-out`,
          }}
          subTitle="易于调用的生活"
          activityConfig={{
            style: {
              boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.2)',
              color: 'whitesmoke',
              borderRadius: 8,
              backgroundColor: 'rgba(255,255,255,0.25)',
              backdropFilter: 'blur(4px)',
              animation: `${fade} 1s ease-in-out`,
            },
            title: '还没有平台账户？',
            subTitle: '加入社区吧',
            action: (
              <Button
                size="large"
                style={{
                  borderRadius: 20,
                  background: token.colorBgElevated,
                  color: token.colorPrimary,
                  width: 120,
                }}
                href={'/user/register'}
              >
                去注册
              </Button>
            ),
          }}
          actions={
            <div
              style={{
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                flexDirection: 'column',
                height: 30,
              }}
            >
            </div>
          }
          onFinish={async (values) => {
            if(loginType === 'account')
            await handleSubmit(values as API.UserLoginRequest);
            else
              handleSubmitmaile(values as API.UserLoginByEmailRequest)
          }}
        >
          <Tabs
            centered
            activeKey={loginType}
            onChange={(activeKey) => setLoginType(activeKey as LoginType)}
            animated={true}
          >
            <Tabs.TabPane key={'account'} tab={'账号密码登录'} />
            <Tabs.TabPane key={'e-mail'} tab={'邮箱登录'} />
          </Tabs>
          {loginType === 'account' && (
            <>
              <ProFormText
                name="userAccount"
                fieldProps={{
                  size: 'large',
                  prefix: (
                    <UserOutlined
                      style={{
                        color: token.colorText,
                      }}
                      className={'prefixIcon'}
                    />
                  ),
                }}
                placeholder={'用户名'}
                rules={[
                  {
                    required: true,
                    message: '请输入用户名',
                  },
                ]}
              />
              <ProFormText.Password
                name="userPassword"
                fieldProps={{
                  size: 'large',
                  prefix: (
                    <LockOutlined
                      style={{
                        color: token.colorText,
                      }}
                      className={'prefixIcon'}
                    />
                  ),
                }}
                placeholder={'密码'}
                rules={[
                  {
                    required: true,
                    message: '请输入密码',
                  },
                ]}
              />
            </>
          )}
          {loginType === 'e-mail' && (
            <>
              <ProFormText
                fieldProps={{
                  size: 'large',
                  prefix: (
                    <MailOutlined
                      style={{
                        color: token.colorText,
                      }}
                      className={'prefixIcon'}
                    />
                  ),
                }}
                name="emailAddress"
                placeholder={'您的邮箱'}
                rules={[
                  {
                    required: true,
                    message: '请输入邮箱！',
                  }
                ]}
              />
              <ProFormCaptcha
                fieldProps={{
                  size: 'large',
                  prefix: (
                    <LockOutlined
                      style={{
                        color: token.colorText,
                      }}
                      className={'prefixIcon'}
                    />
                  ),
                }}
                phoneName={'emailAddress'}
                captchaProps={{
                  size: 'large',
                }}
                placeholder={'请输入验证码'}
                captchaTextRender={(timing, count) => {
                  if (timing) {
                    return `${count} ${'获取验证码'}`;
                  }
                  return '获取验证码';
                }}
                name="identifyCode"
                rules={[
                  {
                    required: true,
                    message: '请输入验证码！',
                  },
                ]}
                onGetCaptcha={async (phone) => {
                  await sendSimpleMessageUsingPost1({
                    sendTo: phone,
                  })
                  message.success(` ${phone} 验证码发送成功!`);
                }}
              />
            </>
          )}
          <div
            style={{
              marginBlockEnd: 24,
            }}
          >
            <ProFormCheckbox noStyle name="autoLogin">
              自动登录
            </ProFormCheckbox>
            <a
              style={{
                float: 'right',
              }}
              href={'/user/changepass'}
            >
              忘记密码
            </a>
          </div>
        </LoginFormPage>
        {/*<LoginFormPage*/}
        {/*  contentStyle={{*/}
        {/*    minWidth: 280,*/}
        {/*    maxWidth: '75vw',*/}
        {/*  }}*/}
        {/*  //logo={<img alt="logo" src="/logo.svg" />}*/}
        {/*  title="OpenAPI Platform"*/}
        {/*  subTitle={intl.formatMessage({ id: 'pages.layouts.userLayout.title' })}*/}
        {/*  initialValues={{*/}
        {/*    autoLogin: true,*/}
        {/*  }}*/}
        {/*  actions={[*/}
        {/*    // <Form.Item name="switch" label="Switch" valuePropName="checked">*/}
        {/*    //   <Switch />*/}
        {/*    // </Form.Item>*/}
        {/*    // <FormattedMessage*/}
        {/*    //   key="registerWith"*/}
        {/*    //   id="还没有账号，点击注册"*/}
        {/*    //   defaultMessage="还没有账号，点击注册"*/}
        {/*    // />,*/}
        {/*    <FormattedMessage*/}
        {/*      key="loginWith"*/}
        {/*      id="pages.login.loginWith"*/}
        {/*      defaultMessage="其他登录方式"*/}
        {/*    />,*/}
        {/*    <ActionIcons key="icons"/>,*/}
        {/*    // <ActionIcons key="icons" />,*/}
        {/*  ]}*/}
        {/*  onFinish={async (values) => {*/}
        {/*    await handleSubmit(values as API.UserLoginRequest);*/}
        {/*  }}*/}

        {/*>*/}
        {/*  <Tabs*/}
        {/*    activeKey={type}*/}
        {/*    onChange={setType}*/}
        {/*    centered*/}
        {/*    items={[*/}
        {/*      {*/}
        {/*        key: 'account',*/}
        {/*        label: intl.formatMessage({*/}
        {/*          id: 'pages.login.accountLogin.tab',*/}
        {/*          defaultMessage: '账户密码登录',*/}
        {/*        }),*/}
        {/*      },*/}
        {/*      {*/}
        {/*        key: 'mobile',*/}
        {/*        label: intl.formatMessage({*/}
        {/*          id: 'pages.login.phoneLogin.tab',*/}
        {/*          defaultMessage: '手机号登录',*/}
        {/*        }),*/}
        {/*      },*/}
        {/*    ]}*/}
        {/*  />*/}

        {/*  {status === 'error' && loginType === 'account' && (*/}
        {/*    <LoginMessage*/}
        {/*      content={intl.formatMessage({*/}
        {/*        id: 'pages.login.accountLogin.errorMessage',*/}
        {/*        defaultMessage: '账户或密码错误(admin/ant.design)',*/}
        {/*      })}*/}
        {/*    />*/}
        {/*  )}*/}
        {/*  {type === 'account' && (*/}
        {/*    <>*/}
        {/*      <ProFormText*/}
        {/*        name="userAccount"*/}
        {/*        fieldProps={{*/}
        {/*          size: 'large',*/}
        {/*          prefix: <UserOutlined />,*/}
        {/*        }}*/}
        {/*        placeholder={intl.formatMessage({*/}
        {/*          id: 'pages.login.username.placeholder',*/}
        {/*          defaultMessage: '用户名',*/}
        {/*        })}*/}
        {/*        rules={[*/}
        {/*          {*/}
        {/*            required: true,*/}
        {/*            message: (*/}
        {/*              <FormattedMessage*/}
        {/*                id="pages.login.username.required"*/}
        {/*                defaultMessage="请输入用户名"*/}
        {/*              />*/}
        {/*            ),*/}
        {/*          },*/}
        {/*        ]}*/}
        {/*      />*/}
        {/*      <ProFormText.Password*/}
        {/*        name="userPassword"*/}
        {/*        fieldProps={{*/}
        {/*          size: 'large',*/}
        {/*          prefix: <LockOutlined />,*/}
        {/*        }}*/}
        {/*        placeholder={intl.formatMessage({*/}
        {/*          id: 'pages.login.password.placeholder',*/}
        {/*          defaultMessage: '密码',*/}
        {/*        })}*/}
        {/*        rules={[*/}
        {/*          {*/}
        {/*            required: true,*/}
        {/*            message: (*/}
        {/*              <FormattedMessage*/}
        {/*                id="pages.login.password.required"*/}
        {/*                defaultMessage="请输入密码"*/}
        {/*              />*/}
        {/*            ),*/}
        {/*          },*/}
        {/*        ]}*/}
        {/*      />*/}
        {/*    </>*/}
        {/*  )}*/}

        {/*  {status === 'error' && loginType === 'mobile' && <LoginMessage content="验证码错误" />}*/}
        {/*  {type === 'mobile' && (*/}
        {/*    <>*/}
        {/*      <ProFormText*/}
        {/*        fieldProps={{*/}
        {/*          size: 'large',*/}
        {/*          prefix: <MobileOutlined />,*/}
        {/*        }}*/}
        {/*        name="mobile"*/}
        {/*        placeholder={intl.formatMessage({*/}
        {/*          id: 'pages.login.phoneNumber.placeholder',*/}
        {/*          defaultMessage: '手机号',*/}
        {/*        })}*/}
        {/*        rules={[*/}
        {/*          {*/}
        {/*            required: true,*/}
        {/*            message: (*/}
        {/*              <FormattedMessage*/}
        {/*                id="pages.login.phoneNumber.required"*/}
        {/*                defaultMessage="请输入手机号！"*/}
        {/*              />*/}
        {/*            ),*/}
        {/*          },*/}
        {/*          {*/}
        {/*            pattern: /^1\d{10}$/,*/}
        {/*            message: (*/}
        {/*              <FormattedMessage*/}
        {/*                id="pages.login.phoneNumber.invalid"*/}
        {/*                defaultMessage="手机号格式错误！"*/}
        {/*              />*/}
        {/*            ),*/}
        {/*          },*/}
        {/*        ]}*/}
        {/*      />*/}
        {/*      <ProFormCaptcha*/}
        {/*        fieldProps={{*/}
        {/*          size: 'large',*/}
        {/*          prefix: <LockOutlined />,*/}
        {/*        }}*/}
        {/*        captchaProps={{*/}
        {/*          size: 'large',*/}
        {/*        }}*/}
        {/*        placeholder={intl.formatMessage({*/}
        {/*          id: 'pages.login.captcha.placeholder',*/}
        {/*          defaultMessage: '请输入验证码',*/}
        {/*        })}*/}
        {/*        captchaTextRender={(timing, count) => {*/}
        {/*          if (timing) {*/}
        {/*            return `${count} ${intl.formatMessage({*/}
        {/*              id: 'pages.getCaptchaSecondText',*/}
        {/*              defaultMessage: '获取验证码',*/}
        {/*            })}`;*/}
        {/*          }*/}
        {/*          return intl.formatMessage({*/}
        {/*            id: 'pages.login.phoneLogin.getVerificationCode',*/}
        {/*            defaultMessage: '获取验证码',*/}
        {/*          });*/}
        {/*        }}*/}
        {/*        name="captcha"*/}
        {/*        rules={[*/}
        {/*          {*/}
        {/*            required: true,*/}
        {/*            message: (*/}
        {/*              <FormattedMessage*/}
        {/*                id="pages.login.captcha.required"*/}
        {/*                defaultMessage="请输入验证码！"*/}
        {/*              />*/}
        {/*            ),*/}
        {/*          },*/}
        {/*        ]}*/}
        {/*        onGetCaptcha={async (phone) => {*/}
        {/*          const result = await getFakeCaptcha({*/}
        {/*            phone,*/}
        {/*          });*/}
        {/*          if (!result) {*/}
        {/*            return;*/}
        {/*          }*/}
        {/*          message.success('获取验证码成功！验证码为：1234');*/}
        {/*        }}*/}
        {/*      />*/}
        {/*    </>*/}
        {/*  )}*/}
        {/*  <div*/}
        {/*    style={{*/}
        {/*      marginBottom: 24,*/}
        {/*    }}*/}
        {/*  >*/}
        {/*    <ProFormCheckbox noStyle name="autoLogin">*/}
        {/*      <FormattedMessage id="pages.login.rememberMe" defaultMessage="自动登录" />*/}
        {/*    </ProFormCheckbox>*/}
        {/*    <a*/}
        {/*      style={{*/}
        {/*        float: 'right',*/}
        {/*      }}*/}
        {/*    >*/}
        {/*      <FormattedMessage id="pages.login.forgotPassword" defaultMessage="忘记密码" />*/}
        {/*    </a>*/}
        {/*  </div>*/}
        {/*  /!*<Button Button type="primary" htmlType="submit" className="login-form-button">注册</Button>*!/*/}
        {/*</LoginFormPage*/}
      </div>
    </div>
  );
};

export default Login;
